<template>
	<view>
		<!-- 操作票名称 -->
		<u-popup :show="shebeiShow" mode="bottom" @close="shebeiShow = false">
			<view class="device">
				<view class="devHerders flex  align-items  justify-content-between">
					<view class="devclose" @click="shebeiShow =  false">取消</view>
					<view class="comit" @click="deviceComit">确认</view>
				</view>
				<view class="device_serch">
					<u-search placeholder="操作票名称" v-model="name" @custom="gettemplateList" @search="gettemplateList"
						@clear='gettemplateList'></u-search>
				</view>
				<view class="device_list">
					<view class="device_herder flex justify-content-between">
						<view class="device_herder_name">操作票名称</view>
						<view class="device_herder_name">选中</view>
					</view>
					<view class="sordec">
						<view class="device_item flex" v-for="(v,i) in deviceList" :key="i" @click="deviceCak(v)">
							<view class="itemss">{{v.taskName}}</view>
							<view class="itemss">
								<view class="yuans" v-if="v.id  != device">
								</view>
								<u-icon v-else name="checkmark-circle-fill" color="#267DFF" :size="20"></u-icon>
							</view>
						</view>
						<view class=" base" v-if="deviceList.length <=0">
							暂无数据
						</view>
					</view>
				</view>
			</view>
		</u-popup>
	</view>
</template>

<script>
	import {
		getAssociationOrderList
	} from '@/api/lssue.js'
	export default {
		name:"lussTmeple",
		data() {
			return {
				shebeiShow:false,
				deviceList:[],
				device:'',
				name:''
			};
		},
		mounted() {
			 this.gettemplateList()
		},
		methods:{
			deviceCak(v){
				 this.device = v.id
			},
			deviceComit(){
				if(this.device =='') return  uni.$u.toast('请选择操作票')
				const arr = this.deviceList.filter(v=>v.id == this.device)
				this.$emit('tmpletSubmit',arr[0])
				this.shebeiShow =false
				
			},
			async gettemplateList() {
				const res = await getAssociationOrderList({
					id:'',
					name:this.name
				})
				console.log(res, "操作票");
				this.deviceList = res.datas

				// console.log(this.deviceList, "templateLists");
			
			},
		}
	}
</script>

<style lang="scss" scoped>

	.device {
		height: 1000rpx;
		padding: 0 30rpx;
		padding-top: 30rpx;

		&_serch {
			margin-top: 20rpx;
		}

		.devHerders {
			.devclose {
				font-size: 30rpx;
				color: rgb(144, 145, 147);
			}

			.comit {
				font-size: 30rpx;
				color: rgb(60, 156, 255);
			}

		}

		&_herder {
			margin-top: 20rpx;
			border: 1rpx solid #E6E6E6;
			border-right: none;
			height: 70rpx;

			view {
				text-align: center;
				border-right: 1rpx solid #E6E6E6;
				font-size: 28rpx;
				flex: 1;
				line-height: 70rpx;
			}

		}

		&_item {
			min-height: 80rpx;
			border-bottom: 1rpx solid #e6e6e6;
			border-left: 1rpx solid #E6E6E6;

			.itemss {
				text-align: center;
				border-right: 1rpx solid #E6E6E6;
				font-size: 28rpx;
				flex: 1;
				display: flex;
				justify-content: center;
				align-items: center;
				word-wrap: break-word;
				word-break: break-all;
			}
		}
	}
	.yuans {
		display: flex;
		width: 20rpx;
		height: 20rpx;
		border: 1rpx solid #E6E6E6;
		border-radius: 50%;
	}
	.sordec {
		height: 750rpx;
		overflow-y: scroll;
	}
	.base{
		text-align: center;
		margin-top: 80rpx;
	}
	
</style>